<template>
    <div class="article-container" v-for="(articleItem, index) in article" :key="index" >
        <div class="article-item">
            <div class="article-info">
                <p class="article-author">作者: {{ articleItem.author }}</p>
                <p class="article-time">{{ articleItem.publish_time }}</p>
                <p class="article-title" @click="view">标题: {{ articleItem.title }}</p>
            </div>
        </div>
        <div class="imges" style="">
            <img :src="articleItem.cover_img" @click="view" alt="">
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ShoppingCart } from '@element-plus/icons-vue';
import request from '@/request';
import { useRouter } from 'vue-router';
const router = useRouter()

// 获取文章数据
let article = ref([]);
onMounted(() => {
    request({
        method: 'GET',
        url: 'users/getarticle/'
    }).then(resp => {
        if (Array.isArray(resp.data.article_list)) {
            article.value = resp.data.article_list;
            // console.log('文章数据:', resp.data.article_list);
        } else {
            console.error('后端返回的article_list不是数组类型');
        }
    }).catch(error => {
        console.log('文章显示失败', error);
    });
});

function view() {
    router.push({ path: '/articlelist' });
}

</script>
<style scoped>
/* 文章列表区 */
.article-container {
    width: 600px;
    height: 1000px;
    /* position: absolute; */
    /* background-color: pink; */
    padding: 1.5rem 2rem;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 20;
}


.article-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #8a8888;
    transition: all 0.3s ease;
}

.article-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.article-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.article-author {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.3rem;
}

.article-time {
    font-size: 0.8rem;
    color: #aaa;
}

.article-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: #888;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.imges {
    margin-left: 40px;
    width: 120px;
    height: 80px;
    background-color: aqua;
}

.imges img {
    width: 400px;
    height: 400px;
}
</style>